<template>
  <div>
    <el-dialog title="新增加料" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label=" " prop="name" :rules="[{ required: true, message: '请输入加料名称', trigger: 'blur' }]">
                <el-input placeholder="请输入加料名称" v-model="modelForm.name" auto-complete="off" :maxlength="5" size="medium" :disabled="!isSave">
                    <template slot="prepend">
                      <el-tooltip placement="top" content="请输入加料名称">
                        <el-button tabIndex="-1">名称</el-button>
                      </el-tooltip>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label=" " prop="type" :rules="[{ required: true, message: '请选择加料分类', trigger: 'change' }]">
                <div class="el-input el-input-group el-input-group--prepend">
                    <div class="el-input-group__prepend">分类</div>
                      <el-select v-model="modelForm.type" filterable placeholder="请选择加料分类" size="medium" class="w-100p">
                        <el-option
                            v-for="item in categorys"
                            :key="item.id"
                            :label="item.name"
                            :disabled="item.state!='NORMAL'"
                            :value="item.id">
                        </el-option>
                      </el-select>
                    <div class="el-input-group__prepend el-input-right" @click="innerVisible = true">新增分类</div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="0" v-model="modelForm.price" auto-complete="off" :maxlength="5" size="medium" >
                    <template slot="prepend">
                      <el-tooltip placement="top" content="请输入价格">
                        <el-button tabIndex="-1">价格</el-button>
                      </el-tooltip>
                    </template>
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>
        <!-- <el-button type="primary" @click="innerVisible = true" size="medium">新增分类</el-button> -->
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
          <model :isShow="innerVisible" @close="addClose" @addSuccess="addSuccess"></model>
    </el-dialog>
  </div>
</template>
<script>
  import model from './model'
  //注意路径
  export default {
    props: ['isShow', 'id'],  //参数
    data() {
      return {
        modelForm: {
          attribute:'1'
        },
        showDialog: false,
        activityId: "",
        isSave: true,
        downCategeryId: [],
        isUpdate: false,
        innerVisible:false,
        treeData:[],
        storeId:window.localStorage.getItem("dishKuId"),
        categorys:[]
      };
    },
    components:{
      model
    },
    watch: {
      isShow: function (newValue, oldValue) {
        this.showDialog = newValue;
        if (newValue) {
          if (this.id != '') {
            this.activityId = this.id;
            this.isSave = false;
            this.isUpdate = true;

            this.$axios.get("dishes/dishesFeeds/" + this.activityId + "/update?storeId="+this.storeId).then(data => {
              data.content.dishesFeed.type=data.content.dishesFeed.typeId;
              this.modelForm = data.content.dishesFeed;
              this.categorys=data.content.categorys;
            });
          } else {
            this.isSave = true;
            this.isUpdate=false;
            this.$axios.get("dishes/dishesFeeds/create?storeId="+this.storeId).then(data => {
              this.modelForm = data.content.dishesFeed;
              this.categorys=data.content.categorys;

            });
          }
        }
      }
    },
    created() {
      window.this = this;
    },
    methods: {
      addSuccess(){
          this.innerVisible = false;
        this.$axios.get("dishes/dishesFeeds/create?storeId="+this.storeId).then(data => {
          // this.modelForm = data.content.dishesFeed;
          this.categorys=data.content.categorys;

        });
      },
      addClose(){
          this.innerVisible = false;
      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            newList[i].value = newList[i].id + "";
            newList[i].children = null;
          }
        }
      },
      goBack() {
        this.router.go(-1);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.modelForm.storeId = this.storeId;

            if (this.isSave) {
              this.$axios.post("dishes/dishesFeeds/create", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }

              })

            } else {
              this.modelForm._method = "PUT";
              this.$axios.put("dishes/dishesFeeds/" + this.activityId + "/update", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('close');
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit('close');
        done();
      },
      isNum(item, key) {
        var r = /^\+?[1-9][0-9]*$/;
        if (!r.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      },
      isDouble(item, key) {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      }
    }
  }
</script>
<style scoped>
.el-input-right{
  border-left:0;
  border-right: 1px solid #dcdfe6;
  cursor:pointer;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
</style>
